<script setup>
import DictTag from '@/components/DictTag/DictTag.vue'
import EllipsisText from '@/components/EllipsisText/EllipsisText.vue'
import { formatDate } from '@/utils/day.js'
import { useDict } from '@/utils/dict.js'
import BaseDialog from '../BaseDialog/BaseDialog.vue'

const props = defineProps({
  applicationData: {
    type: Object,
    default: () => {},
    required: true,
  },
  feeData: {
    type: Object,
    default: () => {},
    required: true,
  },
})
const type = ref('patent')
const { sys_patent_type, sys_patent_real_fee_status, sys_patent_status } = useDict('sys_patent_type', 'sys_patent_real_fee_status', 'sys_patent_status')

const visible = defineModel('visible', {
  default: false,
  type: Boolean,
  required: true,
})

const tabsAnimation = ref(false)
const tabsDirection = ref('right')

function handleClose() {
  type.value = 'patent'
  visible.value = false
}

function switchType(val) {
  if (type.value === val) { return }

  tabsDirection.value = val === 'patent' ? 'left' : 'right'
  tabsAnimation.value = true

  setTimeout(() => {
    type.value = val
    tabsAnimation.value = false
  }, 300)
}
</script>

<template>
  <BaseDialog
    v-model:visible="visible"
    title="查看"
    :options="{
      showFooter: false,
    }"
    class="!w-[65%] !overflow-hidden"
    top="2%"
    is-full-screen
    @close="handleClose"
  >
    <div class="flex h-[52px] rounded mb-3 cursor-pointer">
      <div
        v-ripple
        class="w-[50%] flex-center font-bold text-lg bg-[#F8F8F8] "
        :class="{ '!bg-[#EFF4FF] text-[#3664D1]': type === 'patent' }"
        @click="switchType('patent')"
      >
        申请信息
      </div>
      <div
        v-ripple
        class="w-[50%] flex-center font-bold text-lg bg-[#F8F8F8] "
        :class="{ '!bg-[#EFF4FF] text-[#3664D1]': type === 'fee' }"
        @click="switchType('fee')"
      >
        费用信息
      </div>
    </div>
    <el-alert title="数据仅供参考！可能存在一定的滞后性和误差！" type="warning" show-icon :closable="false" />
    <div class="patent-detail mt-5 overflow-hidden">
      <transition
        :name="tabsDirection === 'right' ? 'slide-left' : 'slide-right'"
        mode="out-in"
      >
        <div v-if="type === 'patent'" key="patent-panel" class="patent-content space-y-3 overflow-hidden">
          <div class="patent-item">
            <el-descriptions
              title="申请信息"
              :column="3"
              size="large"
              border
            >
              <el-descriptions-item label="申请号/专利号">
                {{ applicationData.applicationNumber }}
              </el-descriptions-item>
              <el-descriptions-item label="专利名称">
                <EllipsisText
                  :content="applicationData.patentName || '暂无'"
                />
              </el-descriptions-item>
              <el-descriptions-item label="申请日">
                {{ applicationData.applicationTime || '暂无' }}
              </el-descriptions-item>
              <el-descriptions-item label="主分类号">
                {{ applicationData.mainTypeNumber || '暂无' }}
              </el-descriptions-item>
              <el-descriptions-item label="案件状态">
                {{ applicationData.patentStatusDisplay || '暂无' }}
              </el-descriptions-item>
              <el-descriptions-item label="专利类型">
                <DictTag
                  :options="sys_patent_type"
                  :value="applicationData.patentType"
                />
              </el-descriptions-item>
              <el-descriptions-item label="分案提交日">
                {{ applicationData.caseSubmitTime || '暂无' }}
              </el-descriptions-item>
              <el-descriptions-item label="主分类版本号">
                {{ applicationData.mainTypeVersion || '暂无' }}
              </el-descriptions-item>
              <el-descriptions-item label="副分类号">
                <EllipsisText
                  :width="250"
                  :content="applicationData.secondTypeNumber || '暂无'"
                />
              </el-descriptions-item>
              <el-descriptions-item label="副分类版本号">
                <EllipsisText
                  :width="210"
                  :content="applicationData.secondTypeVersion || '暂无'"
                />
              </el-descriptions-item>
              <el-descriptions-item label="分类日期">
                {{ applicationData.typeTime || '暂无' }}
              </el-descriptions-item>
            </el-descriptions>

            <div class="patent-item-header text-lg font-bold mb-3 mt-3">
              申请人
            </div>
            <vxe-table
              :data="applicationData.applicationList"
            >
              <vxe-column field="applicationName" title="姓名或名称" align="center" />
              <vxe-column field="applicationNational" title="国籍或总部所在地" align="center" />
              <vxe-column field="postalCode" title="邮政编码" align="center" />
              <vxe-column field="detailAddress" title="详细地址" />
            </vxe-table>
          </div>
          <div class="patent-item" v-if="applicationData.inventorList">
            <div class="patent-item-header text-lg font-bold mb-3">
              发明人
            </div>
            <vxe-table
              :data="applicationData.inventorList"
            >
              <vxe-column field="inventorName" title="发明人姓名" align="center" />
            </vxe-table>
          </div>
          <div class="patent-item" v-if="applicationData.linkPersonList">
            <div class="patent-item-header text-lg font-bold mb-3">
              联系人
            </div>
            <vxe-table
              :data="applicationData.linkPersonList"
            >
              <vxe-column field="linkName" title="联系人名称" align="center" />
              <vxe-column field="postalCode" title="邮政编码" align="center" />
              <vxe-column field="detailAddress" title="详细地址" align="center" />
            </vxe-table>
          </div>
          <div class="patent-item" v-if="applicationData.agencyOrgList">
            <div class="patent-item-header text-lg font-bold mb-3">
              代理机构
            </div>
            <vxe-table
              :data="applicationData.agencyOrgList"
            >
              <vxe-column field="agencyName" title="代理机构名称" align="center" />
              <vxe-column field="firstPersonName" title="第一代理人" align="center" />
            </vxe-table>
          </div>
        </div>
        <div v-else-if="type === 'fee'" key="fee-panel" class="patent-content space-y-3 overflow-hidden">
          <div v-if="feeData.patentInvoiceRedList" class="patent-item">
            <div class="patent-item-header text-lg font-bold mb-3">
              冲红信息
            </div>
            <vxe-table
              :data="feeData.patentInvoiceRedList"
            >
              <vxe-column field="typeofFee" title="费用种类" align="center">
                <template #default="{ row }">
                  <p>冲红前：{{ row.frontFeeType }}</p>
                  <p>冲红后：{{ row.behindFeeType }}</p>
                </template>
              </vxe-column>
              <vxe-column field="amount" title="缴费金额" align="center">
                <template #default="{ row }">
                  <p>冲红前：{{ row.frontAmount }}</p>
                  <p>冲红后：{{ row.behindAmount }}</p>
                </template>
              </vxe-column>
              <vxe-column title="冲红时间" field="redTime" align="center">
                <template #default="{ row }">
                  {{ row.invoiceRedTime ? formatDate(row.invoiceRedTime, 'YYYY-MM-DD') : '' }}
                </template>
              </vxe-column>
              <vxe-column field="ticketCode" title="票据代码" align="center">
                <template #default="{ row }">
                  <p>冲红前：{{ row.frontBillCode }}</p>
                  <p>冲红后：{{ row.behindBillCode }}</p>
                </template>
              </vxe-column>
              <vxe-column field="ticketNumber" title="票据号码" align="center">
                <template #default="{ row }">
                  <p>冲红前：{{ row.frontBillPhone }}</p>
                  <p>冲红后：{{ row.behindBillPhone }}</p>
                </template>
              </vxe-column>
            </vxe-table>
          </div>
          <div v-if="feeData.patentRefundList" class="patent-item">
            <div class="patent-item-header text-lg font-bold mb-3">
              退费信息
            </div>
            <vxe-table
              :data="feeData.patentRefundList"
            >
              <vxe-column field="refundType" title="退费种类" align="center" />
              <vxe-column field="refundAmount" title="退费金额" align="center" />
              <vxe-column field="refundTime" title="退费时间" align="center">
                <template #default="{ row }">
                  {{ row.refundTime ? formatDate(row.refundTime, 'YYYY-MM-DD') : '' }}
                </template>
              </vxe-column>
              <vxe-column field="recipientName" title="收款人姓名" align="center" />
              <vxe-column field="billCode" title="票据代码" align="center" />
              <vxe-column field="billNumber" title=" 票据号码" align="center" />
            </vxe-table>
          </div>
          <div class="patent-item" v-if="feeData.shouldFeeList">
            <div class="patent-item-header text-lg font-bold mb-3">
              应缴费信息
            </div>
            <vxe-table
              :data="feeData.shouldFeeList"
            >
              <vxe-column field="feeType" title="费用种类" align="center" />
              <vxe-column field="shouldAmount" title="应缴金额" align="center" />
              <vxe-column field="deadlineTime" title="缴费截止日期" align="center">
                <template #default="{ row }">
                  {{ row.deadlineTime ? formatDate(row.deadlineTime, 'YYYY-MM-DD') : '' }}
                </template>
              </vxe-column>
              <vxe-column field="feeStatus" title="费用状态" align="center">
                <template #default="{ row }">
                  <DictTag :options="sys_patent_real_fee_status" :value="row.feeStatus" />
                </template>
              </vxe-column>
            </vxe-table>
          </div>
          <div class="patent-item" v-if="feeData.alreadyFeeList">
            <div class="patent-item-header text-lg font-bold mb-3">
              已缴费信息
            </div>
            <vxe-table
              :data="feeData.alreadyFeeList"
            >
              <vxe-column field="feeType" title="费用种类" align="center" />
              <vxe-column field="shouldAmount" title="应缴金额" align="center" />
              <vxe-column field="feeTime" title="缴费日期" align="center">
                <template #default="{ row }">
                  {{ row.feeTime ? formatDate(row.feeTime, 'YYYY-MM-DD') : '' }}
                </template>
              </vxe-column>
              <vxe-column field="feePersonName" title="缴费人姓名" align="center" />
              <vxe-column field="billCode" title="票据代码" align="center" />
              <vxe-column field="billNumber" title="票据号码" align="center" />
            </vxe-table>
          </div>
          <div class="patent-item" v-if="feeData.patentReceiptIssuanceList">
            <div class="patent-item-header text-lg font-bold mb-3">
              收据发文信息
            </div>
            <vxe-table
              :data="feeData.patentReceiptIssuanceList"
            >
              <vxe-column field="feeType" title="费用种类" align="center" width="150" show-overflow="title" />
              <vxe-column field="feeAmount" title="缴费金额" align="center" width="100" show-overflow="title" />
              <vxe-column field="feePersonName" title="缴费人姓名" align="center" min-width="160" show-overflow="title" />
              <vxe-column field="feeTime" title="缴费时间" align="center" min-width="100" show-overflow="title">
                <template #default="{ row }">
                  {{ row.feeTime ? formatDate(row.feeTime, 'YYYY-MM-DD') : '' }}
                </template>
              </vxe-column>
              <vxe-column field="receiptNumber" title="收据号" align="center" min-width="100" show-overflow="title" />
              <vxe-column field="receiptTitle" title="收据抬头" align="center" min-width="150" show-overflow="title" />
              <vxe-column field="receiptAddress" title="收据邮寄地址" align="center" width="150" show-overflow="title" />
              <vxe-column field="remittanceTime" title="汇款日期" align="center" width="100" show-overflow="title">
                <template #default="{ row }">
                  {{ row.remittanceTime ? formatDate(row.remittanceTime, 'YYYY-MM-DD') : '' }}
                </template>
              </vxe-column>
              <vxe-column field="isSend" title="是否寄出" align="center" width="100" show-overflow="title" />
              <vxe-column field="publishTime" title="发文日期" align="center" width="100" show-overflow="title">
                <template #default="{ row }">
                  {{ row.publishTime ? formatDate(row.publishTime, 'YYYY-MM-DD') : '' }}
                </template>
              </vxe-column>
              <vxe-column field="registrationNumber" title="挂号号码" align="center" width="100" show-overflow="title" />
              <vxe-column field="refundRemittanceTime" title="退款汇出日期" align="center" width="150" show-overflow="title">
                <template #default="{ row }">
                  {{ row.refundRemittanceTime ? formatDate(row.refundRemittanceTime, 'YYYY-MM-DD') : '' }}
                </template>
              </vxe-column>
            </vxe-table>
          </div>
        </div>
      </transition>
    </div>
  </BaseDialog>
</template>

<style scoped lang="scss">
/* 左侧滑入动画 */
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.3s ease;
}

.slide-left-enter-from {
  transform: translateX(100%);
  opacity: 0;
}

.slide-left-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

/* 右侧滑入动画 */
.slide-right-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-right-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

/* 表格条纹样式优化 */
:deep(.vxe-table--stripe) {
  background-color: #f9f9f9;
}

/* 标题样式优化 */
.patent-item-header {
  position: relative;
}
</style>
